<template>
  <view class="container">
    <view class="heard">
      <image class="loginBg" src="/static/loginBg.png"></image>
      <p>
        <span>您好</span>
        <span>请先登录</span>
      </p>
    </view>
    <view class="form">
      <u--input
        placeholder="手机号码"
        border="surround"
        shape="circle"
        v-model="telphone"
      ></u--input>
      <view class="check flex-st">
        <u-checkbox-group
          shape="circle"
          v-model="radiovalue1"
          placement="column"
        >
          <u-checkbox activeColor="#13B9C7"></u-checkbox>
        </u-checkbox-group>
        <view class="t1"
          >已阅读并同意 <span>《用户协议》</span>和<span
            >《隐私政策》</span
          ></view
        >
      </view>
      <view class="btn flex-i">
          <u-button :disabled="false" :customStyle="{width: '490rpx'}" color="#13B9C7" type="primary" shape="circle" text="获取验证码" @click="sendCode()"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {sendMsg,login} from  "@/api/api.js"
export default {
  name: "login",
  data() {
    return {
      telphone: null,
      radiovalue1: null,
    };
  },

  methods: {
	  sendCode(){
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
			if(this.radiovalue1===null){
				uni.showToast({
					title: '请先同意相关政策',
					icon: 'none'
				})
				return
			}
			if (!this.telphone) {      //判断如果手机号为空，提示用户输入手机号
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			} else if (!reg.test(this.telphone)) {        //判断手机号格式时候正确
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return

			}
			sendMsg(this.telphone).then(res=>{
				if(res.code==200){
					uni.navigateTo({
						url:'/pages/login/code?phone='+this.telphone
					})
				}else{
					uni.showToast({
						title: '短信发送失败',
						icon: 'error'
					})
					return
				}
			});
			
	  }
  },
};
</script>
<style lang="scss" scoped>
.heard {
  position: relative;
  width: 100vw;
  .loginBg {
    width: 100%;
    height: 390rpx;
    background: #13b9c7;
  }
  p {
    position: absolute;
    bottom: 60rpx;
    z-index: 9;
    font-size: 60rpx;
    font-weight: 400;
    line-height: 80rpx;
    left: 80rpx;
    span {
      display: inline-block;
      width: 100%;
    }
  }
}
.form {
  padding: 48rpx 60rpx;
  box-sizing: border-box;
  .check {
    padding: 12rpx 0 12rpx 40rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #cecece;
    span {
      color: #19c0d0;
    }
  }
  .btn{
      width: 100%;
      padding: 40rpx 0;
  }
}
</style>
